<template>
	<view class="tabsActive">
		<view :class="{
			item:true,
			item2:res.status
		}" :style="itemStyle" v-for="(res,index) in pageData" @click="activeClick({
			value:res.name,
			index:index
		})">
			{{res.name}}
			
			<view v-if="res.status" class="line"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => [],
			},

			click: {
				type: Function,
				default: () => {}
			}
		},
		data() {
			return {
				listLength: 0, // list的长度
				pageData:[], // 页面数据
			};
		},
		created() {
			this.pageData = this.list.map(res => ({
				name: res.name,
				status: false
			}))

			this.pageData[0].status = true
		},
		computed: {
			'itemStyle': function() {
				return `width:${100 / this.list.length}%`
			}
		},
		methods: {
			activeClick(val) {
				this.pageData.forEach((res,index)=>{
					this.pageData[index].status = res.name === val.value
				})
				this.$emit('click', val)
			},
		},
	}
</script>

<style lang="less" scoped>
	.tabsActive {
		#flex(-, space-between, center);
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
		
		.item {
			#font(32rpx, #0f0d21, black);
			#flex(-, center, center);
			
			position: relative;

			height: 88rpx;
			
			
			.line{
				#box(64rpx,8rpx,4rpx,linear-gradient(180deg, #E27C8A 0%, #EC606F 100%));
				position: absolute;
				bottom: -10rpx;
				left: 50%;
				margin-left: -32rpx;
			}
			
		}

		.item2 {
			background-image: linear-gradient(180deg, #E27C8A -3%, #EC606F 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent
		}
		

	}
</style>